<template>
  <div class="role">
    <div class="search">
      <page-search :searchConfig="searchConfig" @resetClick="resetClick" @queryClick="queryClick" />
    </div>

    <div class="content">
      <page-content :contentConfig="contentConfig" ref="pageContentRef" @newClick="newClick" @editClick="editClick" />
    </div>

    <page-modal ref="pageModalRef" :modalConfig="modalConfig" :otherInfo="otherInfo" @reOtherInfo="reOtherInfo">
      <template #menuList v-if="isShowCustomItem">
        <el-tree
          ref="treeRef"
          :data="entireMenus"
          show-checkbox
          node-key="id"
          :default-checked-keys="defaultcheckedKeys"
          :default-expanded-keys="defaultExpandedKeys"
          :props="{ children: 'children', label: 'name' }"
          @check="handleElTreeCheck"
        />
      </template>

      <!-- <template #test v-if="isShowCustomItem">
        <el-input v-model="otherInfo.otherForm" />
      </template> -->
    </page-modal>
  </div>
</template>

<script setup lang="ts">
  import pageSearch from '@/components/page-search/page-search.vue'
  import searchConfig from './config/search.config'
  import pageContent from '@/components/page-content/page-content.vue'
  import contentConfig from './config/content.config'
  import pageModal from '@/components/page-modal/page-modal.vue'
  import modalConfig from './config/modal.config'
  import usePageContent from '@/hooks/usePageContent'
  import usePageModal from '@/hooks/usePageModal'
  import { storeToRefs } from 'pinia'
  import useMainStore from '@/store/main/main'
  import { nextTick, ref } from 'vue'
  import type { ElTree } from 'element-plus'
  import { mapMenus2Ids } from '@/utils/map-menus'

  const { pageContentRef, resetClick, queryClick } = usePageContent()
  const { pageModalRef, newClick, editClick } = usePageModal(editCallback, newCallback)

  const mainStore = useMainStore()
  const { entireMenus } = storeToRefs(mainStore)

  const treeRef = ref<InstanceType<typeof ElTree>>()
  const isShowCustomItem = ref<boolean>(false)
  let otherInfo = ref<any>()
  function handleElTreeCheck(_checkedNodes: any, halfCheckedNodes: any) {
    const menuList = [...halfCheckedNodes.checkedKeys, ...halfCheckedNodes.halfCheckedKeys]
    otherInfo.value = { menuList }
  }

  const defaultcheckedKeys = ref<number[]>([])
  const defaultExpandedKeys = ref<number[]>([])
  async function editCallback(row: any) {
    isShowCustomItem.value = true
    otherInfo.value = { menuList: row.menuList }
    /*
      nextTick: 一次tick需要执行pre（当前vue需要准备的工作），queue（修改的逻辑缓存到队列中），post（生命周期，update）
        此时获取dom一定时可以获取到的

      底层是实现逻辑(fn即为nextTick方法，他是直接放在then中，这样保证执行pre，queue，post后可以立即执行nextTick)
        const promise = new Promise(() => {
          pre()
          queue()
          post()
        }).then(fn)
    */
    await nextTick()
    const menuList = mapMenus2Ids(row.menuList)
    treeRef.value?.setCheckedKeys(menuList)
    defaultcheckedKeys.value = menuList
    defaultExpandedKeys.value = menuList
  }

  function newCallback() {
    isShowCustomItem.value = true
  }

  // 重置form中插槽的其他数据
  async function reOtherInfo() {
    console.log('reOtherInfo')
    isShowCustomItem.value = false
    setTimeout(() => (isShowCustomItem.value = true), 100)
    otherInfo.value = {
      menuList: []
    }
    await nextTick()
    treeRef.value?.setCheckedKeys([])
    defaultcheckedKeys.value = []
    defaultExpandedKeys.value = []
  }
</script>

<style lang="scss" scoped>
  .role {
    .search {
      margin-bottom: 20px;
    }

    .el-tree {
      overflow-y: scroll;
      max-height: 15vh;
      width: 100%;
      :deep(.el-form-item__content) {
        width: 100%;
      }
    }
  }
</style>
